<%@page contentType="text/html; charset=UTF-8" %>
<%@include file="/WEB-INF/jsp/init.jsp"%>

<!-- 解除关联的模态窗口 -->
<div class="modal fade" id="unbindModal" role="dialog">
	<div class="modal-dialog" role="document" style="width: 30%;">
		<div class="modal-content">
			<div class="modal-header">
				<button class="close" data-dismiss="modal">
					<span aria-hidden="true">×</span>
				</button>
				<h4 class="modal-title">解除关联</h4>
			</div>
			<div class="modal-body">
				<p>您确定要解除该关联关系吗？</p>
			</div>
			<div class="modal-footer">
				<button class="btn btn-default" data-dismiss="modal">取消</button>
				<button class="btn btn-danger" id="unRefBtn">确定</button>
			</div>
		</div>
	</div>
</div>

<!-- 关联市场活动的模态窗口 -->
<%@include file="/WEB-INF/jsp/inc/dialog/bindActivities.jsp"%>

<!-- 返回按钮 -->
<div class="page-header">
	<h3>
		<button class="btn btn-default" onclick="back();">
			<span class="glyphicon glyphicon-arrow-left"></span> 返回
		</button>
		<button class="btn btn-default">
			<a id="mailLink">
				<span class="glyphicon glyphicon-envelope"></span> 发送邮件
			</a>
		</button>
		<button class="btn btn-default" url="/clue/convert.html?id=${param.id}">
			<span class="glyphicon glyphicon-retweet"></span> 转换
		</button>
	</h3>
</div>

<!-- 详细信息 -->
<div>
	<div class="page-header">
		<h3>详细信息</h3>
	</div>
	<div style="overflow: auto; padding-top:20px;">
		<div style="float:left; border-bottom:1px solid #D5D5D5;">
			<div style="float:left;width: 200px; color: gray;">名称</div>
			<div style="float:left;width: 200px;"><b>李四先生</b></div>
		</div>

		<div style="float:left; border-bottom:1px solid #D5D5D5;margin-left: 50px;">
			<div style="float:left;width: 200px; color: gray;">所有者</div>
			<div style="float:left;width: 200px;"><b>zhangsan</b></div>
		</div>
	</div>
	<div style="overflow: auto; padding-top:20px;">
		<div style="float:left; border-bottom:1px solid #D5D5D5;">
			<div style="float:left;width: 200px; color: gray;">公司</div>
			<div style="float:left;width: 200px;"><b>百度集团</b></div>
		</div>

		<div style="float:left; border-bottom:1px solid #D5D5D5;margin-left: 50px;">
			<div style="float:left;width: 200px; color: gray;">职位</div>
			<div style="float:left;width: 200px;"><b>CTO</b></div>
		</div>
	</div>
	<div style="overflow: auto; padding-top:20px;">
		<div style="float:left; border-bottom:1px solid #D5D5D5;">
			<div style="float:left;width: 200px; color: gray;">邮箱</div>
			<div style="float:left;width: 200px;"><b>lisi@163.com</b></div>
		</div>

		<div style="float:left; border-bottom:1px solid #D5D5D5;margin-left: 50px;">
			<div style="float:left;width: 200px; color: gray;">公司座机</div>
			<div style="float:left;width: 200px;"><b>010-84846003</b></div>
		</div>
	</div>
	<div style="overflow: auto; padding-top:20px;">
		<div style="float:left; border-bottom:1px solid #D5D5D5;">
			<div style="float:left;width: 200px; color: gray;">公司网站</div>
			<div style="float:left;width: 200px;"><b>http://www.itszb.com</b></div>
		</div>

		<div style="float:left; border-bottom:1px solid #D5D5D5;margin-left: 50px;">
			<div style="float:left;width: 200px; color: gray;">手机</div>
			<div style="float:left;width: 200px;"><b>12345678901</b></div>
		</div>
	</div>
	<div style="overflow: auto; padding-top:20px;">
		<div style="float:left; border-bottom:1px solid #D5D5D5;">
			<div style="float:left;width: 200px; color: gray;">线索状态</div>
			<div style="float:left;width: 200px;"><b>已联系</b></div>
		</div>

		<div style="float:left; border-bottom:1px solid #D5D5D5;margin-left: 50px;">
			<div style="float:left;width: 200px; color: gray;">线索来源</div>
			<div style="float:left;width: 200px;"><b>广告</b></div>
		</div>
	</div>
	<div style="overflow: auto; padding-top:20px;">
		<div style="float:left; border-bottom:1px solid #D5D5D5;">
			<div style="float:left;width: 200px; color: gray;">创建者</div>
			<div style="float:left;width: 200px;">
				<b>zhangsan&nbsp;&nbsp;</b><small style="font-size: 10px; color: gray;">2017-01-18 10:10:10</small>
			</div>
		</div>
		<div style="float:left; border-bottom:1px solid #D5D5D5;margin-left: 50px;">
			<div style="float:left;width: 200px; color: gray;">修改者</div>
			<div style="float:left;width: 200px;">
				<b>zhangsan&nbsp;&nbsp;</b><small style="font-size: 10px; color: gray;">2017-01-18 10:10:10</small>
			</div>
		</div>
	</div>
	<div style="overflow: auto; width:850px;padding-top:20px; border-bottom: 1px solid #D5D5D5;">
		<div style="float:left; width: 200px; color: gray;">描述</div>
		<div style="float:left; width: 650px;"><b>这是一条线索的描述信息</b></div>
	</div>
	<div style="overflow: auto; width:850px;padding-top:20px; border-bottom: 1px solid #D5D5D5;">
		<div style="float:left; width: 200px; color: gray;">联系纪要</div>
		<div style="float:left; width: 650px;"><b>这条线索即将被转换</b></div>
	</div>

	<div style="overflow: auto; width:850px;padding-top:20px; border-bottom: 1px solid #D5D5D5;">
		<div style="float:left; width: 200px; color: gray;">下次联系时间</div>
		<div style="float:left; width: 650px;"><b>2017-05-01</b></div>
	</div>
	<div style="overflow: auto; width:850px;padding-top:20px; border-bottom: 1px solid #D5D5D5;">
		<div style="float:left; width: 200px; color: gray;">详细地址</div>
		<div style="float:left; width: 650px;"><b>北京大兴大族企业湾</b></div>
	</div>
</div>

<!-- 市场活动 -->
<div>
	<div class="page-header">
		<h3>市场活动</h3>
	</div>
	<div style="position: relative;top: 0px;">
		<table class="table table-hover table-striped" style="width: 900px;">
			<thead>
			<tr style="background-color:#d9edf7">
				<th>名称</th>
				<th>开始日期</th>
				<th>结束日期</th>
				<th>所有者</th>
				<th></th>
			</tr>
			</thead>
			<tbody id="dataBody"></tbody>
		</table>
	</div>
	<div>
		<a href="###" id="refLink" data-toggle="modal" data-target="#bindActivitiesModal" style="text-decoration: none;">
			<span class="glyphicon glyphicon-plus"></span>关联市场活动
		</a>
	</div>
</div>

<!-- 备注 -->
<%@include file="/WEB-INF/jsp/inc/remark.jsp"%>

<div style="height: 200px;"></div>
<script>
	jQuery(function ($) {
		function loadRefActs() {
			$.get('/clue/getRefActs?clueId=${param.id}').done(function (data) {
				let html = "";
				for (let ca of data) {
					html += `<tr>
								<td>${"${ca.activity.name}"}</td>
								<td>${"${ca.activity.startDate}"}</td>
								<td>${"${ca.activity.endDate}"}</td>
								<td>${"${ca.activity.owner}"}</td>
								<td>
									<a href="###" activityId='${"${ca.activityId}"}'
										data-toggle="modal" data-target="#unbindModal">
										<span class="glyphicon glyphicon-remove"></span>解除关联
									</a>
								</td>
							</tr>`
				}
				$("#dataBody").html(html);
			});
		}

		loadRefActs();

		// 加载关联市场活动窗口数据
		$.get('/act/getAll').done(function (data) {
			let html = "";
			for (let act of data) {
				html += `<tr>
                            <td><input name="id" value='${"${act.id}"}' type="checkbox"/></td>
                            <td>${"${act.name}"}</td>
                            <td>${"${act.startDate}"}</td>
                            <td>${"${act.endDate}"}</td>
                            <td>${"${act.owner}"}</td>
                        </tr>`
			}
			$("#dataBody2").html(html);
		});

		// 关联市场活动
		$("#refBtn").click(function () {
			let actIds = $(":checkbox[name=id]:checked").map(function () {
				return this.value;
			}).get().join(",");

			$.ajax({
				url: '/clue/refActs',
				type: 'post',
				data: {
					clueId: "${param.id}",
					actIds // 相当于 actIds: actIds
				}
			}).done(function (data) {
				if (data.success) {
					loadRefActs();
					closeDialog();
				}
			});

		});
		let activityId;
		$("#dataBody").on("click", "a[activityId]", function () {
			activityId = $(this).attr("activityId");
		});

		$("#unRefBtn").click(function () {
			$.ajax({
				url: '/clue/unRef?clueId=${param.id}&actId='+activityId,
				type: 'delete',
				success(data) {
					if (data.success) {
						loadRefActs();
						closeDialog();
					}
				}
			})
		});

		// 打开关联窗口，已关联的复选框被选中
		$("#refLink").click(function () {
			let refActIds = $("#dataBody a[activityId]").map(function () {
				return $(this).attr("activityId");
			}).get();

			$(":checkbox[name=id]").prop("checked", function () {
				return refActIds.includes(this.value);
			});
			$("#selectAll").prop("checked", $(":checkbox[name=id]:not(:checked)").size() == 0);
		});

		// 发送邮件
		$("#mailLink").attr("href", "mailto:lisi@163.com")
	})
</script>